var ChoseFile = require("./choseImage.js");

var PlaceDetail = React.createClass({
    getInitialState:function(){
        return {
            addrName:'',
            addrDesc:'',
            typeId:''
        }
    },
    upload:function(){
        // debugger
        // 判断信息是否都是填写完毕
        if(!this.valid()){
            
            return ;
        }

        // 取得信息传递给父组件
        var _info = {};
        _info.imgFile1 = this.refs.img1.getFile();
        _info.imgFile2 = this.refs.img2.getFile();
        _info.imgFile3 = this.refs.img3.getFile();
        _info.addrName = this.state.addrName;
        _info.addrDesc = this.state.addrDesc;
        _info.typeId = this.state.typeId;

        if(this.props.upload){
            this.props.upload(_info);
        }
    },
    valid:function(){
        var self = this;
        var _res = true;
        var len = this.refs.length;
        Object.keys(this.refs).map(function(item){
            // debugger
            // if(self.refs[item].needed){
            //     _res = self.refs[i].checkState(); // 这里拿不到checkState方法
                
            // }
        })
        
        return _res;
    },
    changeHander:function(name){
        var self = this;
        return function(e){
            self.setState({[name]: e.target.value});
        }
    },
    checkState:function(name){
        return function(e){
            if(!e.target.value){
                // 当值为空时
                this.setState([name], 'err');
                return false;
            }else{
                this.setState([name], 'none');
                return true;
            }
        }
    },
    // 清空数据
    clean:function(){
        this.refs.img1.clean();
        this.refs.img2.clean();
        this.refs.img3.clean();
        this.setState({
            addrName:'',
            addrDesc:'',
            typeId:'2'
        })
    },
    render:function(){
        return(
            <div className="new-place">
                <ChoseFile ref="img1" needed/>
                <ChoseFile ref="img2" needed/>
                <ChoseFile ref="img3" needed/>
                <div>
                    <input ref="title" needed className={"ipt"+this.state.nameStyle} type="text" placeholder="地点名称" value={this.state.addrName} onChange={this.changeHander("addrName")} checkState={this.checkState("nameStyle")}/>
                    <textarea ref="desc" needed className={"ipt"+this.state.descStyle} placeholder="地点描述" value={this.state.addrDesc} onChange={this.changeHander('addrDesc')} checkState={this.checkState("descStyle")}></textarea>
                    <select name="typeId" value={this.state.typeId} onChange={this.changeHander('typeId')}>
                        <option value="2">运动健身</option>
                        <option value="3">人气美食</option>
                        <option value="4">休闲娱乐</option>
                        <option value="5">文化艺术</option>
                        <option value="6">风景名胜</option>
                        <option value="7">时尚购物</option>
                    </select>
                    <button onClick={this.upload}>完成</button>
                </div>
                <div>
                   
                </div>
            </div>
        )
    }
});

module.exports = PlaceDetail;